<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>
				首页
			</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/goods' }">商品列表</el-breadcrumb-item>
		</el-breadcrumb>

		<h1>商品管理</h1>
		<el-card style="margin-top: 20px;">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList">
						<el-button slot="append" icon="el-icon-search" @click="search()">
						</el-button>
					</el-input>
				</el-col>
				<el-col :span="8">
					<el-button type="primary" @click="goAddPage">添加商品</el-button>
					<el-button type="danger" @click="goParams">类别管理</el-button>
				</el-col>
			</el-row>
			<!--表格区域-->
			<el-table :data="goodsList" height="700" border stripe v-loading="loading" element-loading-text="拼命加载中"
				style="margin-top: 20px;">
				<el-table-column label="商品编号" width="95px" prop="goods_id"></el-table-column>
				<el-table-column label="商品名称" width="95px" prop="goods_name"></el-table-column>
				<el-table-column label="商品图片" width="95px" prop="goods_img">
					<template slot-scope="scope">
					<img :src="'data:image/jpeg;base64,' + scope.row.goods_img" style="width: 80px;height: 80px;">
					</template>
				</el-table-column>
				<el-table-column label="商品价格" width="95px" prop="goods_price">
				</el-table-column>
				<el-table-column label="商品数量" width="95px" prop="goods_number">
				</el-table-column>
				<el-table-column label="商品描述" width="500px" prop="goods_intro"></el-table-column>
				<el-table-column label="商品类别" width="95px" prop="category_name"></el-table-column>
				<el-table-column label="商品状态" width="95px" prop="goods_status">
					<template slot-scope="scope">
						<el-tag :type="scope.row.goods_status === '待售' ? 'primary' : 'success'" disable-transitions>
							{{scope.row.goods_status}}</el-tag>
					</template>
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row.goods_id)">
						</el-button>
						<el-button type="danger" size="mini" icon="el-icon-delete"
							@click="removeById(scope.row.goods_id)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!--分页-->
			<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage"
				:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total" />
		</el-card>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'List',
		data() {
			return {
				
				currentPage: 1,
				pageSize: 8,
				// 查询参数对象
				queryInfo: {
					query: '',
				},
				// 商品列表
				goodsList: [],
				// 加载项
				loading: true,
		

			}
		},
		created() {

			this.getGoodsList();
			this.findByLimit()
		},
		methods: {
			// 获取商品总长度
			getGoodsList() {
				axios.get('http://localhost:8080/goods/findallgoods')
					.then((res) => {
						this.total = res.data.length
						console.log(this.goodsList)
						this.loading = false

					})
			},
			findByLimit() {
				var item = (this.currentPage - 1) * 8;
				axios.get("http://localhost:8080/goods/findByLimit?start=" + item+"&size=" + this.pageSize)
					.then((res) => {
						this.goodsList = res.data
					});
			},
			handleCurrentChange(nowPage) {
				this.currentPage = nowPage;
				var item = (this.currentPage - 1) * 8;
				axios.get("http://localhost:8080/goods/findByLimit?start=" + item+"&size=" + this.pageSize)
					.then((res) => {
						this.goodsList = res.data
					});
			},
			removeById(v) {
				this.$confirm("永久删除该类别, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						axios.get("http://localhost:8080/goods/delete?goods_id=" + v)
							.then((res) => {
								if (res.data.success) {
									this.$message({
										type: "success",
										message: "删除成功"
									});
									this.findByLimit()
								} else {
									this.$message({
										type: "error",
										message: "删除失败"
									});
								}
							})
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},
			search() {

				axios.get("http://localhost:8080/goods/findbylike?query=" + this.queryInfo.query)
					.then((res) => {

						this.goodsList = res.data
						this.total = res.data.length
						console.log(res.data.goods_img)

					})
			},

			// 去分类
			goParams() {
				this.$router.push('/params')
			},
			goAddPage() {
				this.$router.push('/addgoods')
			},
			// 跳转编辑修改商品页面
			edit(id) {
				this.$router.push({
					path: '/edit-goods',
					query: {
						goods_id: id
					}
				})
			}
		}
	}
</script>
